
<template>
    <div class="person">
      <h2>name:{{person.name}}</h2>
      <button @click="changeName">edit name</button>
      <h2>age:{{person.age}}</h2>
      <button @click="changeAge">age+1</button>
      <h2>person:{{person}}</h2>
      <button @click="changePerson">换人</button>

    </div>
  </template>
  
  <script lang="ts" setup>
  import {ref,watch} from 'vue'
  let person =ref({
    name:'zhang3',
    age:18
  })

    function changeName(){
        person.value.name += '~'
    }
    function changeAge(){
        person.value.age += 1
    }
    function changePerson(){
        person.value = {name:'李四',age:20}
    }

    //watch
    watch(person,(newV,oldV)=>{
        console.log('person变化',newV,oldV)
    },{deep:true,immediate:true})

  </script>